<template>
  <el-button type="primary" @click="exportExcel">导出表格</el-button>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="Name" label="姓名\请假月份" width="150" />
    <el-table-column prop="One" label="一月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.One != 0" type="danger">{{ scope.row.One }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="Two" label="二月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.Two != 0" type="danger">{{ scope.row.Two }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="Three" label="三月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.Three != 0" type="danger">{{ scope.row.Three }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="Four" label="四月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.Four != 0" type="danger">{{ scope.row.Four }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="Five" label="五月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.Five != 0" type="danger">{{ scope.row.Five }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="Six" label="六月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.Six != 0" type="danger">{{ scope.row.Six }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="Seven" label="七月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.Seven != 0" type="danger">{{ scope.row.Seven }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="Eight" label="八月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.Eight != 0" type="danger">{{ scope.row.Eight }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="Nine" label="九月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.Nine != 0" type="danger">{{ scope.row.Nine }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="Then" label="十月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.Then != 0" type="danger">{{ scope.row.Then }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="Eleven" label="十一月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.Eleven != 0" type="danger">{{ scope.row.Eleven }}</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="Twelve" label="十二月" width="80">
      <template v-slot="scope">
        <el-link v-if="scope.row.Twelve != 0" type="danger">{{ scope.row.Twelve }}</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import http from '@/http/axiosHelper';
import { onMounted, ref } from 'vue';
import * as XLSX from 'xlsx';
const tableData = ref([])
onMounted(() => {
  ShowReport()
})
const ShowReport = () => {
  http.get("/api/Request/GetReport").then(res => {
    tableData.value = res.data.Data
  })
}
// 导出 Excel 核心逻辑
const exportExcel = () => {
  // 1. 构建 worksheet 数据
  const header = [
    '姓名\\请假月份',
    '一月',
    '二月',
    '三月',
    '四月',
    '五月',
    '六月',
    '七月',
    '八月',
    '九月',
    '十月',
    '十一月',
    '十二月'
  ]
  const data = tableData.value.map(item => [
    (item as any).Name,
    (item as any).One,
    (item as any).Two,
    (item as any).Three,
    (item as any).Four,
    (item as any).Five,
    (item as any).Six,
    (item as any).Seven,
    (item as any).Eight,
    (item as any).Nine,
    (item as any).Ten,
    (item as any).Eleven,
    (item as any).Twelve
  ])

  // 2. 创建 workbook 和 worksheet
  const worksheet = XLSX.utils.aoa_to_sheet([header, ...data])
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, '请假统计')

  // 3. 生成并下载文件
  XLSX.writeFile(workbook, '请假统计报表.xlsx')
}
</script>
